<template>
	<div id="evaluate">
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left" @click="goBackHome" v-if="num == 0"></a>
			<a class="mui-icon mui-icon-left-nav mui-pull-left" @click="goBack" v-if="num == 1"></a>
			<h1 class="mui-title">{{title}}<span id="showxueqi"></span><span style="display: none;"><a class="mui-icon mui-icon-arrowdown"></a></span></h1>
			<a href="#popover" id="openPopover" class="mui-icon mui-icon-more-filled mui-pull-right" v-if="show"></a>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view mt0">
				<li class="mui-view-cell" style="height:40px">
					<a class="mui-navigate-right full-a">
						<select class="mui-btn mui-btn-block" v-model="selected" @change="newPost" style="padding-top: 8px;">
							<option v-for="item in items" :value="item.GUID">{{item.XQMC}}</option>
						</select>
					</a>
				</li>
			</ul>
			<div class="datelist">
				<ul class="mui-table-view">
				</ul>
			</div>
			<div class="datelist">
				<ul class="mui-table-view">
				</ul>
			</div>
			<section>
				<div class="diva" id="round_chart1">

				</div>
				<div class="divb" id="round_chart2">

				</div>
			</section>
			<article>
				<p class="artinfo" @click="detailList">综合素质评分<span class="mui-badge"><a class="tagCell mui-icon mui-icon-arrowright pr0"></a></span></p>
				<p class="artinfo">专业平均分<span class="average">{{AvgScore}}</span></p>
				<div>
					<p class="artinfo" v-for="studentOrder in studentOrders" @click="person(studentOrder.Num,studentOrder.Name)"><span>{{studentOrder.Name}}</span><span class="average">{{studentOrder.Score}}</span></span><span class="mui-icon mui-icon-arrowright"></span></p>
				</div>
				<input type="hidden" />
			</article>
			<div id="popover" class="mui-popover">
				<div class="mui-popover-arrow"></div>
				<div class="mui-scroll-wrapper" style="height: 300px;margin: 0;">
					<div class="mui-scroll">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" v-for="list in lists" @click="changeClass(list.Name,list.ID)">
								<a>{{list.Name}}</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		getTeacherClass,
		getTeacherSpecialty,
		getSemester
	}
	from '@/service/getData';
	import {
		saveToLocal,
		loadFromLocal,
		deleteFromLocal
	} from '@/service/store';
	export default {
		data() {
			return {
				skipInfo: loadFromLocal("skipInfoa", "obj"),
				userInfo:loadFromLocal("userInfo","obj"),
				title: "",
				UserID: "",
				lists: [],
				items: [],
				ZYDMList: [], //8BB350F0-D082-4461-842C-A393A8F2E164
				BHList: [], //2007128B-7038-4289-BF4A-97AC5AF053DF
				avergeScore: "",
				AvgScore: "",
				ClassID: "",
				studentOrders: [{
					Name: "",
					Score: ""
				}, {
					Name: "",
					Score: ""
				}], //默认取前两名
				selected: "", //学期ID
				type: "",
				show: true,
				statue: "",
				num:""
			}
		},
		created() {
			let self = this;
			saveToLocal("userInfo", {
				UserID: self.$route.params.UserID,
				type: self.$route.params.type
			})
			self.UserID = self.$route.params.UserID;
			self.type = self.$route.params.type;
			self.num = self.$route.params.num;
			if(self.type == 9) {
				self.show = false;
			}
			self.init()
		},
		mounted() {
			//绘制图表

		},
		computed: {

		},
		methods: {
			init() {
				let self = this;
				self.UserID = this.$route.params.UserID;
				self.type = this.$route.params.type;
				if(self.num == 0){
						//获取有有效数据的学期
				getSemester({

				}).then((res) => {
					//				console.log(res);
					self.items = res.data;
					self.selected = res.data[0].GUID;

				});
				getTeacherSpecialty({ //根据领导/班主任ID获取其对应的专业/班级
					UserID: self.UserID
				}).then((res) => {
//					console.log(res)
					mui('.mui-scroll-wrapper').scroll();
					self.lists = res.data;
					self.title = res.data[0].Name;
					self.ClassID = res.data[0].ID;
					//						debugger
					self.getClassData();
					self.drawLine();
				})
				} else if(self.num == 1) {
					self.ClassID = self.skipInfo.ClassID;
					self.title = self.skipInfo.Name;
					//获取有有效数据的学期
					getSemester({

					}).then((res) => {
						//				console.log(res);
						self.items = res.data;
						self.selected = res.data[0].GUID;
						self.drawLine();
						axios({
						url: window.host + '/StatisticService/GetAverageScoreForAll',
						method: 'post',
						data: {
							ZYDM: self.ClassID,
							type: 2
						},
						transformRequest: [function(data) {
							// Do whatever you want to transform the data
							let ret = ''
							for(let it in data) {
								ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
							}
							return ret
						}]
					}).then((res) => {
						//console.log(res);
						self.AvgScore = res.data.data.AvgScore;
						if(res.data.code == 1) {
							if(res.data.data.resultlist.length == 0) {
								self.studentOrders = []
							} else if(res.data.data.resultlist.length == 1) {
								//						self.studentOrders = res.data.data;
								//						筛选
								self.studentOrders = [{
										Name: res.data.data.resultlist[0].Name,
										Score: res.data.data.resultlist[0].Score,
										Num: res.data.data.resultlist[0].Num
									} //一组数据
								]
								//console.log(res.data.data);
							} else {
								self.studentOrders = [{
									Name: res.data.data.resultlist[0].Name,
									Score: res.data.data.resultlist[0].Score,
									Num: res.data.data.resultlist[0].Num
								}, {
									Name: res.data.data.resultlist[1].Name,
									Score: res.data.data.resultlist[1].Score,
									Num: res.data.data.resultlist[1].Num
								}];
							}
							//					console.log(self.studentOrders)
							//					console.log(self.studentOrders[0].XM)
						} else {
							mui.toast("暂时没有数据");
}
});
})

self.lists = [];
self.show = false;
}

},
changeClass(name, id) {
		let self = this;
		self.title = name;
		self.ClassID = id;
		self.getClassData();
		self.drawLine();
		mui("#popover").popover('hide');
			},
			getClassData() {
				let self = this;
				if(self.type == 5) {
					//获取班级学生的前两名
					axios({ //获取学生/班级/专业平均分
						url: window.host + '/StatisticService/GetAverageScoreForAll',
						method: 'post',
						data: {
							ZYDM: self.ClassID,
							type: 2,
							SemesterCode: self.selected
						},
						transformRequest: [function(data) {
							// Do whatever you want to transform the data
							let ret = ''
							for(let it in data) {
								ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
							}
							return ret
						}]
					}).then((res) => {
//						console.log(res);
						self.AvgScore = res.data.data.AvgScore;
						if(res.data.code == 1) {
							if(res.data.data.resultlist.length == 0) {
								self.studentOrders = [];
							} else if(res.data.data.resultlist.length == 1) {
								//						self.studentOrders = res.data.data;
								//						筛选
								self.studentOrders = [{
										Name: res.data.data.resultlist[0].Name,
										Score: res.data.data.resultlist[0].Score
									} //只有一组数据
								]
								//						console.log(res.data.data);
							} else {
								self.studentOrders = [{
									Name: res.data.data.resultlist[0].Name,
									Score: res.data.data.resultlist[0].Score,
									Num: res.data.data.resultlist[0].Num
								}, {
									Name: res.data.data.resultlist[1].Name,
									Score: res.data.data.resultlist[1].Score,
									Num: res.data.data.resultlist[1].Num
								}];
							}
						}

						//					console.log(self.studentOrders)
						//					console.log(self.studentOrders[0].XM)
					});
				}

			},
			//绘制图表
			drawLine() {
				//获取平均分 绘制仪表盘图
				let self = this;
				if(self.type == 5) {
					self.BHList = ["getall"];
					self.ZYDMList = [];
					self.ZYDMList.push(self.ClassID);
				}
				//				debugger
				axios({
					url: window.host + '/StatisticService/GetAverageScore',
					method: 'post',
					data: {
						ZYDMList: self.ZYDMList,
						BHList: self.BHList,
						SemesterCode: self.selected
					},
					transformRequest: [function(data) {
						// Do whatever you want to transform the data
						let ret = ''
						for(let it in data) {
							ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
						}
						return ret
					}]
				}).then((res) => {
					//					console.log(res)
					if(res.data.code == 1) {
						//绘制仪表板图 
						let datalist = res.data.data.CountList;
						let option = {
							title: {
								//	text: dataname,
								textStyle: {
									color: 'red',
									fontSize: '14'
								},
								x: 'center',
								y: "200px"
							},
							series: [{
								//			name: '业务指标',
								type: 'gauge',
								detail: {
									formatter: '{value}'
								},
								data: [{
									name: '素质总分'
								}],
								center: ['50%', '55%'], //仪表盘位置
								radius: '98%', //仪表盘弧度
								axisLine: { // 坐标轴线
									lineStyle: { // 属性lineStyle控制线条样式
										width: 15 //仪表盘线宽
									}
								}
							}]
						}
						let myChart = this.$echarts.init(document.getElementById('round_chart1'));
						option.series[0].data[0].value = res.data.data.AverageScore;
						self.avergeScore = res.data.data.AverageScore;
						option.title.text = res.data.data.AverageScore < 30 ? "素质差" : res.data.data.AverageScore < 60 ? "素质好" : res.data.data.AverageScore < 80 ? "素质高" : res.data.data.AverageScore < 92 ? "素质很高" : res.data.data.AverageScore < 100 ? "素质极高" : "很棒";
						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
						// 绘制饼图
						let optionb = {
							title: {
								text: '', //标题
								subtext: '', //提示
								x: 'center'
							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								left: 'left',
								//      data: ['素质很高','素质低','素质一般','素质高','素质极高']   //数据提示
							},
							series: [{
								name: '占比分布',
								type: 'pie',
								radius: '65%',
								center: ['50%', '50%'],
								data: [{
										value: datalist[1],
										name: '素质很高'
									},
									{
										value: datalist[4],
										name: '素质低'
									},
									{
										value: datalist[3],
										name: '素质一般'
									},
									{
										value: datalist[2],
										name: '素质高'
									},
									{
										value: datalist[0],
										name: '素质极高'
									}

								],
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						}
						//开始绘制
						let myChartb = this.$echarts.init(document.getElementById('round_chart2'));
						option.series[0].data[0].value = res.data.data.AverageScore;
						// 使用刚指定的配置项和数据显示图表。
						myChartb.setOption(optionb);
					}
				})
			},
			detailList() {
				let self = this;
				if(self.type == 5) {
					self.$router.push({
						name: "ClassDetail",
						params: {
							ClassName: self.title,
							ClassID: self.ClassID,
							type: 2,
							semesterCode:self.selected
						}
					})
				}
			},
			newPost() {
				let self = this;
				//console.log(self.selected);
				self.drawLine();
				self.getClassData();
			},
			person(id, name) {
				let self = this;
				//console.log(id);
				 if(self.type == 5) { //专业领导下跳转到专业
					//当id有值的时候
					saveToLocal("skipInfob",{
						ClassID:id,
						Name:name
					})
					self.$router.push({
						name:"EvaluateDetailTeacher",
						params:{
							UserID:self.userInfo.UserID,
							type:3,
							num:1,
						}
					})
				}
			},
			//返回状态
		},
		watch: {
			// 如果路由有变化，会再次执行该方法
			//			"$route": "init"
		}

	}
</script>

<style scoped>
	.mui-navigate-right:after,
	.mui-push-right:after {
		right: 5px;
		color: #333;
	}
	
	.full-a {
		width: 100%;
		height: 100%;
		font-size: 24px;
	}
</style>